<template>
	<view>
		<uni-popup ref='popup' type="center" :maskClick="false">
			<view class="title"></view>
			<view class="text-1">处理订单</view>
			<view class="image" @click="close">
				<image src="/SupplyEnd/static/qx.png" mode=""></image>
			</view>
			<view class="box">
				<view class="company">
					<view class="text-3">审核结果<text>*</text></view>
					<picker class="input" @change="bindPickerChange" :value="index" :range="array">
						<label>{{array[index]}}</label>
					</picker>
				</view>
				<view class="company" v-if="state==3">
				<view class="text-4">原因</view>
				<view class="input">
					<input type="text" v-model="message" placeholder="请输入原因">
				</view>
				</view>
				<view class="btn" @click="confirm">
					确定
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	export default {
		name:"ProcessPop",
		components: {
			uniPopup
		},
		props: {
			info: {
				type: Object,
				require: true
			}
		},
		data() {
			return {
				array:['同意','不同意'],
				index:0,
				state:2,
				message:''
			};
		},
		mounted() {
			this.open()
		},
		methods:{
			//审核选择
			bindPickerChange: function(e) { //改变的事件名
				console.log('picker发送选择改变，携带值为', e.target.value) //用于输出改变索引值
				this.index = e.target.value
				if(this.index==0){
					this.state=2
				}else{
					this.state=3
				}
			},
			open() {
				this.$refs.popup.open()
			},
			confirm(){
				if(!this.state){
					uni.showToast({
						title: '请选择审核结果',
						icon: "none"
					})
					return
				}
				if(this.state==3&&this.message==''){
					uni.showToast({
						title: '请输入原因',
						icon: "none"
					})
					return
					
				}
				let url = '';
				let that = this
				url = "/mobile/index.php?act=supplier-refund&op=audit";
				console.log(that.info)
				that.$util.request({
					url: url,
					method: 'post',
					data: {
						refund_id: that.info.refund_id,
						return_type:that.info.return_type,
						refund_amount: that.info.refund_amount,
						state: that.state,
						message: that.message
					}
				}).then(res => {
					if (res.error_code == 0) {
						uni.showToast({
							title: '操作成功',
							icon: "none"
						})
						setTimeout(() => {
							that.$emit('fnChange')
							that.$refs.popup.close()
						}, 1000)
					} else {
						uni.showToast({
							title: '操作失败',
							icon: "none"
						})
					}	
				})
			},
			close(){
				this.$emit('fnChange')
				this.$refs.popup.close()
			}
		}
	}
</script>

<style lang="scss">
	/deep/ .uni-popup__wrapper-box {
		width: 600rpx !important;
		background: #FFFFFF !important;
		border-radius: 20rpx !important;
		padding: 0rpx !important;
		z-index: 10;
	}
	.title {
		width: 750rpx;
		height: 80rpx;
		background: #E96A1D;
		opacity: 0.1;
	}
	
	.text-1 {
		height: 80rpx;
		width: 100%;
		position: absolute;
		top: 0;
		font-size: 32rpx;
		font-family: Microsoft YaHei;
		font-weight: 800;
		color: #333333;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.image{
		height: 80rpx;
		position: absolute;
		top: 0;
		right: 30rpx;
        display: flex;
		align-items: center;
		image{
			width: 48rpx;
			height: 48rpx;
		}
	}
 .box{
	padding: 30rpx;
	.text-3,.text-4{
		font-size: 24rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #333333;
		
		text {
			color: #E96A1D;
		}
	}
	.text-4 {
		margin-top: 30rpx;
	}
	.input{
		width: 500rpx;
		height: 84rpx;
		background: #F6F6F6;
		border-radius: 12rpx;
		display: flex;
		align-items: center;
		padding: 0 20rpx;
		color: #333333;
	}
	.btn {
		width: 360rpx;
		height: 80rpx;
		background: #E96A1D;
		border-radius: 40rpx;
		text-align: center;
		margin: 0 auto;
		margin-top: 60rpx;
		justify-content: center;
		display: flex;
		align-items: center;
		font-size: 30rpx;
		font-family: Microsoft YaHei;
		font-weight: 300;
		color: #FFFFFF;
	}
 }
</style>
